<template>
	<view class="content">
		<!-- 反馈内容 -->
		<textarea class="text" maxlength="500" placeholder="请输入您要反馈的问题（5-500字以内）" placeholder-class="placeholder" @blur="bindTextAreaBlur"></textarea>
	  <!-- 问题照片 -->
		<view class="imgContent">
			<view class="title">请提供问题截图或照片(选填)</view>
			<view class="imgsListContent">
				<view class="imgsList">
					<view class="uploadContent" v-for="(img,index) in images" :key="index">
						<image src="../../static/recharge/close.png" class="closeImg" @tap="delImgs(index)"></image>
						<image :src="img.url" class="img"></image>
					</view>
				</view>
				<image src="../../static/recharge/uploadImg.png" class="uploadImg" v-if="images.length < 3" @tap="chooseImg"></image>
			</view>
		</view>
		<!-- 联系方式 -->
		<view class="phoneContent">
			<view class="title">联系方式</view>
			<view class="inputContent">
				<input class="input" placeholder="请输入手机号" placeholder-class="placeholders" v-model="contactInformation" />
			  <image src="../../static/recharge/close.png" class="closeImg"></image>
			</view>
		</view>
		<!-- 提示 -->
		<view class="tips">
			您的反馈我们会尽快解决，无法保证每一条都及时反馈，如果有紧急咨询，请及时联系客服。
		</view>
		<view class="sure" @tap="submit">提交</view>
	</view>
</template>

<script>
	import store from '../../store/index.js'
	import { feedback } from '../../api/api.js'
	export default {
		data() {
			return {
				// 问题内容
				issueContent:'',
				// 联系方式
				contactInformation:'',
				// 上传图片列表
				images:[],
			}
		},
		methods: {
			bindTextAreaBlur(e) {
				this.issueContent = e.detail.value
			},
			// 点击上传凭证
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: res => {
						uni.uploadFile({
							url:store.state.baseUrl + '/api/common/uploadBatch',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success:res=> {
								let path = JSON.parse(res.data);
								if (this.images.length > 0) {
									this.images = this.images.concat(path.data)
								} else {
									this.images = path.data;
								}
							}
						})
					}
				})
			},
			// 删除图片
			delImgs(index) {
				this.images.splice(index, 1)
			},
			// 提交
			submit() {
				if( !this.issueContent ) {
					uni.showToast({
						icon:'none',
						title:'请输入问题内容'
					})
					return false
				}
				if( !this.contactInformation ) {
					uni.showToast({
						icon:'none',
						title:'请输入联系方式'
					})
					return false
				}
				uni.showLoading()
				var picture = this.images.map((item,index) => {
					return item.url
				}).join(",")
				let data = {
					issueContent:this.issueContent,
					contactInformation:this.contactInformation,
					picture:picture,
				}
				feedback(data).then( res=> {
					uni.hideLoading()
					uni.showToast({
						icon:'none',
						title:'上传成功，请等待审核'
					})
					setTimeout(function() {
						uni.navigateBack({
							delta:1
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="less">
  .content {
		display: flex;
		align-items: center;
		flex-direction: column;
		// 反馈内容
		.text {
			padding: 30rpx;
			margin-top: 30rpx;
			width: 630rpx;
			height: 260rpx;
			background: #F2F2F2;
			border-radius: 14rpx;
		}
		.placeholder {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
			line-height: 33rpx;
		}
		// 问题照片
		.imgContent {
			padding: 30rpx;
			margin-top: 32rpx;
			width: 630rpx;
			height: 260rpx;
			background: #F2F2F2;
			border-radius: 14rpx;
			.title {
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #CCCCCC;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #808080;
				line-height: 33rpx;
			}
			.imgsListContent {
				margin-top: 37rpx;
				display: flex;
				align-items: center;
				.imgsList {
					display: flex;
					align-items: center;
					.uploadContent {
						position: relative;
						margin-right: 38rpx;
						width: 168rpx;
						height: 168rpx;
						.closeImg {
							position: absolute;
							top: -17rpx;
							right: -17rpx;
							width: 34rpx;
							height: 34rpx;
						}
						.img {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}
				}
				.uploadImg {
					width: 170rpx;
					height: 170rpx;
				}
			}
		}
		// 联系方式
		.phoneContent {
			margin-top: 32rpx;
			width: 690rpx;
			height: 93rpx;
			background: #F2F2F2;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title {
				margin-left: 32rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #808080;
				line-height: 33rpx;
			}
			.inputContent {
				margin-right: 38rpx;
				display: flex;
				align-items: center;
				.input {
					text-align: right;
				}
				.closeImg {
					margin-left: 30rpx;
					width: 28rpx;
					height: 28rpx;
				}
				.placeholders {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B8B8B8;
					line-height: 33rpx;
				}
			}
		}
		// 提示
		.tips {
			width: 690rpx;
			margin-top: 35rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #B8B8B8;
			line-height: 33rpx;
		}
		.sure {
			margin-top: 80rpx;
			text-align: center;
			line-height: 90rpx;
			width: 690rpx;
			height: 90rpx;
			background: #FE3B33;
			border-radius: 45rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
